<script lang="ts" setup>
import { useTemplateRef } from 'vue';
import { useFormConfig } from './hooks/use-form-config';
import { ElForm } from 'element-plus';

defineOptions({ name: 'TemplateDetail' });

const { formConfig, formData } = useFormConfig();

const isEdit = ref(true);

const isReadOnly = ref(false);

const proFormRef = useTemplateRef<InstanceType<typeof ElForm>>('proFormRef');
const handleSave = async () => {
  await proFormRef.value?.validate();
};
</script>

<template>
  <AppPage>
    <template #main>
      <PageCard title="表单">
        <template #header-left>
          <el-switch v-model="isEdit" inline-prompt active-text="编辑" inactive-text="禁用" />
          <el-button type="primary" @click="handleSave">保存</el-button>
        </template>
        <ProForm
          ref="proFormRef"
          :config="formConfig"
          :model="formData"
          labelWidth="100"
          :disabled="!isEdit"
          :col="{
            md: 8,
            lg: 6,
          }"
        />
      </PageCard>
    </template>
  </AppPage>
</template>
